<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, reactive, onUnmounted} from 'vue';
import * as echarts from 'echarts';
import getEchart1 from '@/api/servers/echarts'

const chartRef = ref(null);
const timer = ref(null);

// 异步获取echarts数据
let chart;
const chartsData = reactive({
  data: {}
});
const getData = async () => {
  const { data } = await getEchart1();
  chartsData.data = data.data[0]
}
// 数据轮询
timer.value = setInterval(() => {
  getData();  
}, 1000 * 60 * 3)

// 组件挂载时初始化echarts实例 避免无法获取dom
onMounted(async () => {
  await getData();
  chart = echarts.init(chartRef.value);
  chart.setOption(chartsData.data);
});

// 组件卸载 清除定时器 echarts实例
onUnmounted(()=>{
  clearInterval(timer.value);
  chart.dispose();
})

</script>    